<template>
	<div>
		<div class="head-area">
			<div class="start-layout guohui-area">
				<img class="guohui-img" src="@/assets/image/guohui.png">
				<div>
					<div class="zh-name">{{name}}</div>
					<div class="eng-name">{{enName}}</div>
				</div>
			</div>
			<div v-if="type!=9" class="search-area between-layout">
				<input class="search-input" v-model="keyword" placeholder="请输入关键词" />
				<router-link style="outline:none;" :to="{path:'/searchResult',query:{keyword:keyword}}">
					<div class="search-btn center-layout"><i class="el-icon-search" style="margin-right: 6px;"></i>搜索
					</div>
				</router-link>
			</div>
		</div>
		<div class="tab-area center-layout">
			<div class="left-nav"></div>
			<div class="right-nav"></div>
			<div class="tabs">
				<div class="tabs-box between-layout">
					<router-link style="outline:none;" :to="{path:'/'}">
						<div @click="type=1" :class="type==1?'tabs-active':''" class="tabs-item">
							首&emsp;&emsp;页
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/agencySet',query:{id:'1817830386937192448'}}">
						<div @click="type=2" :class="type==2?'tabs-active':''" class="tabs-item">
							机构设置
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/affairsOpen',query:{id:'1817835226660691968'}}">
						<div @click="type=3" :class="type==3?'tabs-active':''" class="tabs-item">
							检务公开
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/newsList',query:{id:'1817829252155662336'}}">
						<div @click="type=4" :class="type==4?'tabs-active':''" class="tabs-item">
							检察要闻
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/lawMonitor',query:{id:'1817842098599981056'}}">
						<div @click="type=5" :class="type==5?'tabs-active':''" class="tabs-item">
							法律监督
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/business',query:{id:'1817842224282300416'}}">
						<div @click="type=6" :class="type==6?'tabs-active':''" class="tabs-item">
							检察业务
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/theoryResearch',query:{id:'1817842526263799808'}}">
						<div @click="type=7" :class="type==7?'tabs-active':''" class="tabs-item">
							理论研究
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/baseBuilding',query:{id:'1817842684183539712'}}">
						<div @click="type=8" :class="type==8?'tabs-active':''" class="tabs-item">
							检察文化
						</div>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: process.env.VUE_APP_TITLE,
				enName: process.env.VUE_APP_ENG_TITLE,
				type: 1,
				keyword: null
			}
		},
		props: {
			typeRoute: {
				type: Number,
				default: 1,
			}
		},
		watch: {
			typeRoute: {
				handler(val, oldval) {
					this.type = val
					this.keyword=''
				},
				immediate: true,
				deep: true
			}
		},
	}
</script>

<style scoped lang="scss">
	.head-area {
		width: 100%;
		height: 465px;
		background: url(~@/assets/image/222.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.guohui-area {
			padding-top: 100px;
			margin-left: 100px;

			.guohui-img {
				display: block;
				width: 130px;
				height: 130px;
			}

			.zh-name {
				font-size: 56px;
				letter-spacing: 8px;
				color: #133678;
				font-weight: 700;
				font-family: "Microsoft YaHei";
			}

			.eng-name {
				font-size: 28px;
				color: #133678;
				font-weight: 400;
				font-family: "Microsoft YaHei";
			}
		}

		.search-area {
			margin-top: 60px;
			margin-left: 120px;
			width: 538px;
			height: 48px;
			background: #fff;
			border-radius: 30px;
			-webkit-border-radius: 30px;
			-moz-border-radius: 30px;
			overflow: hidden;

			.search-input {
				width: 100%;
				margin-left: 30px;
				margin-right: 10px;
				border: none;
				outline: none;
			}

			.search-btn {
				width: 110px;
				height: 48px;
				background: #427ece;
				cursor: pointer;
				color: #ecf2fa;
				font-size: 18px;
			}
		}
	}

	.tab-area {
		width: 100%;
		position: relative;
		background: #4278c8;

		.left-nav {
			position: absolute;
			left: 0;
			top: -10px;
			width: 250px;
			height: 82px;
			background: linear-gradient(-104deg, transparent 20px, #5192df 0, #4a82d2 8%, #5091DE 100%);
		}

		.right-nav {
			position: absolute;
			right: 0;
			top: -10px;
			width: 250px;
			height: 82px;
			background: linear-gradient(104deg, transparent 20px, #5192df 0, #4a82d2 8%, #5091DE 100%);
		}

		.tabs {
			position: relative;
			width: 66%;
			margin: 0 14%;

			.tabs-box {
				height: 62px;
				width: 100%;

				.tabs-item {
					color: #bfd9f9;
					font-size: 20px;
					cursor: pointer;
					flex-shrink: 0;
				}

				.tabs-item:hover {
					color: #ffffff;
					font-weight: 600;
				}

				.tabs-active {
					color: #ffffff;
					font-weight: 600;
					position: relative;
				}

				.tabs-active::after {
					content: '';
					position: absolute;
					bottom: -10px;
					left: 0;
					width: 100%;
					height: 4px;
					background-color: #fff;
				}

				.bottom-line {
					position: absolute;
					bottom: -15px;
					left: 0;
				}
			}
		}
	}
</style>